<template>
  <div class="emr-content-module module-personalHistory">
    <div class="h3" id="personalHistory">个人史</div>
    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <span>出生史: 第</span>
      <el-input
        v-model.number="d.personalHistory.attr1"
        size="medium"
        :disabled="d.disabled"
        placeholder="输入疾病"
        maxlength="50"
        style="width: 120px"
      ></el-input>
      <span>产</span>
      <span style="display: inline-block">
        <el-radio-group v-model="d.personalHistory.attr2">
          <el-radio size="medium" label="顺产" :disabled="d.disabled">
            顺产
          </el-radio>
          <el-radio size="medium" label="早产" :disabled="d.disabled">
            早产
          </el-radio>
          <el-radio size="medium" label="刨宫产" :disabled="d.disabled">
            刨宫产
          </el-radio>
        </el-radio-group>
      </span>

      <div>
        <span>产伤:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr3">
            <el-radio size="medium" label="0" :disabled="d.disabled">
              无
            </el-radio>
            <el-radio size="medium" label="1" :disabled="d.disabled">
              有
            </el-radio>
          </el-radio-group>
        </span>
      </div>

      <div>
        <span>窒息:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr4">
            <el-radio size="medium" label="0" :disabled="d.disabled">
              无
            </el-radio>
            <el-radio size="medium" label="1" :disabled="d.disabled">
              有
            </el-radio>
          </el-radio-group>
        </span>
      </div>

      <div>
        <span>喂养史:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr5">
            <el-radio size="medium" label="母乳喂养" :disabled="d.disabled">
              母乳喂养
            </el-radio>
            <el-radio size="medium" label="人工喂养" :disabled="d.disabled">
              人工喂养
            </el-radio>
            <el-radio size="medium" label="混合喂养" :disabled="d.disabled">
              混合喂养
            </el-radio>
          </el-radio-group>
        </span>
      </div>

      <div>
        <span>生长发育史:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr6">
            <el-radio
              size="medium"
              label="语言、学步、上学方面是否有特殊"
              :disabled="d.disabled"
            ></el-radio>
          </el-radio-group>
        </span>
      </div>

      <div>
        <span>预防接种史:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr7">
            <el-radio
              size="medium"
              label="按时打预防针"
              :disabled="d.disabled"
            ></el-radio>
            <el-radio
              size="medium"
              label="未按时打预防针"
              :disabled="d.disabled"
            ></el-radio>
          </el-radio-group>
        </span>
      </div>

      <div>
        <span>有无不良反应:</span>
        <span style="display: inline-block">
          <el-radio-group v-model="d.personalHistory.attr8">
            <el-radio size="medium" label="0" :disabled="d.disabled">
              无
            </el-radio>
            <el-radio size="medium" label="1" :disabled="d.disabled">
              有
            </el-radio>
          </el-radio-group>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive } from '@vue/reactivity'
  export default {
    name: 'personalHistory',
    setup() {
      const initForm = function () {
        return {
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          attr5: null,
          attr6: null,
          attr7: null,
          attr8: null,
        }
      }

      const d = reactive({ personalHistory: initForm() })

      return {
        d,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
